<template>
  <div id="detailPieChart"></div>
</template>
<script setup>
import * as echarts from "echarts";
import resize from "@/mixin/resize.js";
let myChart = shallowRef();
onMounted(() => {
  myChart.value = echarts.init(document.getElementById("detailPieChart"));
  resize(myChart.value);
  getServerData();
});
let option = {
  backgroundColor: "#fff",
  color: ["#FFC947", "#FF7B69", "#14B069"],
  // title: [
  //   {
  //     text: "200",
  //     top: "40%",
  //     textAlign: "center",
  //     left: "50%",
  //     textStyle: {
  //       color: "#333",
  //       fontSize: 40,
  //       fontFamily: "PingFangSC",
  //     },
  //   },
  //   {
  //     text: "未更换量",
  //     top: "58%",
  //     textAlign: "center",
  //     left: "50%",
  //     textStyle: {
  //       color: "#999",
  //       fontSize: 18,
  //       fontFamily: "PingFangSC",
  //     },
  //   },
  // ],
  tooltip: {
    trigger: "item",
    axisPointer: {
      type: "cross",
    },
    triggerOn: "mousemove",
    confine: false,
    position: function (point) {
      // 自定义 tooltip 的位置
      return { top: point[1], left: point[0] };
    },

    formatter: function (params) {
      return (
        params.name +
        "<br> 数量: " +
        params.value +
        "<br>占比: " +
        params.data.onLine
      );
    },
  },
  // legend: {
  //   orient: "vertical",
  //   itemGap: 10,
  //   itemWidth: 16,
  //   itemHeight: 16,
  //   bottom: "center",
  //   right: "6%",
  //   textStyle: {
  //     color: "#000000",
  //   },
  // },
  series: [
    {
      type: "pie",
      radius: ["60%", "85%"],
      center: ["50%", "50%"],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: "center",
      },
      labelLine: {
        show: false,
      },
      selectedMode: "single",
      selectedOffset: 5,
      data: [
        { name: "应更换量", value: 225, onLine: 120, offLine: 5 },
        { name: "未更换量", value: 124, onLine: 120, offLine: 5 },
        { name: "未更1换量", value: 124, onLine: 120, offLine: 5 },
      ],
    },
  ],
};
let getServerData = () => {
  myChart.value.setOption(option);
};
</script>
<style lang="scss" scoped>
#detailPieChart {
  width: 100%;
  height: calc(36vh - 100px);
}
</style>
